import { Button, Drawer, Popover, List, Radio, Tag,Input } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import { GlobalVal } from '../../global';
import { login } from '../methods';
export const ENVDATAList = 'ENVDATAList'
export const USERList = 'USERList'
export const USERAUTO = 'USERAUTO'

export const LoginQuiklyApi = {}
// 快捷登录
export function LoginQuikly() {
    const [userList, userListSet] = useState([])
    LoginQuiklyApi.userListSet = userListSet
    LoginQuiklyApi.userList = userList
    useEffect(() => {
        // 从缓存中获取用户数据
        try {
            getData(USERList).then((userList) => {
                if (userList) {
                    userListSet(userList)
                }
            })
        } catch (error) {
            console.warn(error)
        }
        try {
            getData(USERAUTO).then((userAuto) => {
                if (userAuto) {
                    let name = userAuto.split('/')[0]
                    let pwd = userAuto.split('/')[1]
                    console.warn('name,pwd',name,pwd)
                    setTimeout(() => {
                        login(name, pwd)
                    }, 500);
                }
            })
        } catch (error) {
            console.warn(error)
        }
    }, [])
    useEffect(() => {
        // 同步修改的数据
        try {
            chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
                let userList = request
                if (userList && userList.length > 0) {
                    userListSet(userList)
                }
            })
                
        } catch (error) {
            console.warn(error)
        }
    }, [])   
    return (
        <React.Fragment>
            {userList.map(({ name, pwd },index) => {
                return <Button  onClick={() => { login(name, pwd) }} key={`name${index}`} title={`${name}/${pwd}`} style={{ fontSize: "16px", marginRight: "0px" }} className="login-button u-button wui-button">
                    {name}/{pwd}
                </Button>
            })}
            {/* <UserAdd/> */}
        </React.Fragment>
    );
}


export  function setData(key, value) {
    return new Promise((resolve) => {
        chrome.storage.local.set({ [key]: value }, function () {
            resolve()
            console.warn('value',value)
        });
    }).catch(() => {

    })


}
export  function getData(key) {
    return new Promise((resolve) => {
        chrome.storage.local.get([key], function (res) {
            resolve(res[key])
        });
    }).catch(() => {

    })


}


export  function  UserAdd()  {
    const [inputValue, setInputValue] = useState('');
    const [inputVisible, setInputVisible] = useState(false);
    const inputRef = useRef({})
    const handleInputChange = (e) => {
        setInputValue(e.target.value);
    };

    const handleInputConfirm = () => {
        if (inputValue && !LoginQuiklyApi.userList.includes(inputValue)) {
            let user = inputValue.split('/')
            let userList = [...LoginQuiklyApi.userList, {name:user[0],pwd:user[1] ?user[1] :'123456a!'}]
            LoginQuiklyApi.userListSet(userList);
            setData(USERList, userList)
        }
        setInputVisible(false);
        setInputValue('');
    };

    const onClick = () => {
        setInputVisible(true);
        setTimeout(() => {
            inputRef.current.focus()
        }, 20);
    }; 
    return (
        <div>
            {
                inputVisible ?
                <Input
                    type="text"
                    size="small"
                    value={inputValue}
                    onChange={handleInputChange}
                    onBlur={handleInputConfirm}
                    onPressEnter={handleInputConfirm}
                    style={{ width: '120px',}}
                    placeholder="kf1/123456a!"
                    ref={inputRef}
                /> :
                <Button size="small" onClick={onClick} >
                    + 添加账号
                </Button>
            }
        </div>
    );
};